<template>
  <view style="background: #F4F6FA;height: 93.3vh;">
    <view class="twoContent">
      <view class="contentTitle">请选择意见类型</view>
      <view class="contentOne">
        <view v-for="item,index in changeData">
          <view @click='onChange(index)'
            :class="{'change1': isShow[index],'change2': !isShow[index],}">{{item.text}}</view>
        </view>
      </view>
      <view class="contentTwo">
        <view class="input">
          <textarea v-model="input"
            placeholder="请在这里输入你宝贵的意见，我们收到后会及时跟进。" />
        </view>
        <view class="imageList">
          <view v-if="imgList.length>0"
            class="imgWrap"
            v-for="(item,index) in imgList"
            :key="index">
            <image class="img"
              @tap="previewImage(index)"
              :src="item"></image>
            <image class="close"
              @tap="close(index)"
              src="../../static/img/icon_close.png"></image>
          </view>
          <view v-if="videoSrc"
            class="videoWrap">
            <cover-view v-if="isOne"
              style="background: #000;position: absolute;top:0;left:0;right:0;bottom: 0;border-radius: 16rpx;"></cover-view>
            <video id="myVideo"
              class="videos"
              :src="videoSrc"
              autoplay
              @play="toPlay"></video>
            <cover-image class="closes"
              @tap="closes"
              src="../../static/img/icon_close.png"></cover-image>
          </view>
          <view v-if="imgList.length<9&&!videoSrc"
            @tap="addImg"
            class="imgWrap addImg">
            <image style="width: 64rpx;height: 64rpx;"
              src="../../static/img/base-icon-camera.png"></image>
            <text style="color: #595959;font-size: 28rpx;margin-top: 8rpx;">上传照片</text>
          </view>
        </view>
        <!-- <view class='upload'>
          <image src="@/static/img/sctp.png"
            style="width:70%;height:70%"></image>
          <view style="color:#C4C4C4;font-size: 20rpx">上传图片</view>
        </view> -->
      </view>
    </view>
    <view class="button"
      @click="onSure">确定</view>

    <uni-popup ref="videoPopup"
      type="bottom"
      border-radius="32rpx 32rpx 0 0">
      <view class="videoPopups">
        <view @tap="chooseImg"
          class="choosePopup"
          style="border: 2rpx solid #F6F7F9;">照片</view>
        <view @tap="chooseVideo"
          class="choosePopup">视频</view>
        <view style="width: 100%;height: 20rpx;background: #F6F7F9;"></view>
        <view @tap="closeVideoPopup"
          class="choosePopup">取消</view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup
  lang="ts">
  import { ref } from 'vue'
  import { onLoad } from "@dcloudio/uni-app"
  import {saveAppComplaintsAndOpinions} from '@/utils/api/userInfo.ts'
  	import { setDialogView } from '@/utils/dialogView.ts'
  const changeData = ref([
    { text: '功能体验' }, { text: '配送服务' }, { text: '其他' }
  ])
  const selectType=ref('功能体验')
  const isShow = ref<boolean[]>([]);
  onLoad(() => {
    isShow.value[0] = true
  })

  const onChange = (n : number) => {
    isShow.value = []
    isShow.value[n] = true
	selectType.value=changeData.value[n].text
  }

  const input = ref("")
  const onSure = async () => {
	if(!input.value){
		uni.showToast({
			title: '请输入建议内容',
			icon: 'error'
		})
		return
	}
	
	const list = videoSrc.value ? [videoSrc.value] : imgList.value
	let dataResults=[]
	if(list.length>0){
		const uploadPromises = list.map((item : any) => {
			return uni.uploadFile({
				url: `${getApp().globalData.baseUrl}/app/file/uploadFile`,
				filePath: item,
				name: 'file'
			});
		});
		const results = await Promise.all(uploadPromises)
		 dataResults = results.map(result => JSON.parse(result.data).data.fileId);
	}
	
	const data={
		data:{
			appComplaintsAndOpinions:{
				type:"OPINION",
				content:selectType.value+' ' +input.value,
				attachmentId:JSON.stringify(dataResults)
			}
		}
	}
	
	saveAppComplaintsAndOpinions(data).then(res=>{
		
		uni.showToast({
			title: '建议成功',
			icon: 'none'
		})
		setTimeout(() => {
			uni.switchTab({
				url: '/pages/my/my'
			})
		}, 100)
	})
  }
  const imgList = ref<any>([]) //图片数组
  const videoSrc = ref('')  //视频地址
  // 添加图片或视频
  const videoPopup = ref<InstanceType<typeof Popup> | null>(null);
  const closeVideoPopup = () => {
    videoPopup.value.close()
  }
  const addImg = () => {
    videoPopup.value.open('bottom')
  }
  const chooseImg = () => {
    if (videoSrc.value) {
      uni.showToast({
        title: '不能同时发布照片和视频',
        icon: 'none'
      })
    } else {
      videoPopup.value.close()
	  setDialogView('READ_EXTERNAL_STORAGE').then(res=>{
		  if(res == 1){
			  uni.chooseImage({
			    count: 9 - imgList.value.length,
			    sourceType: ["album"],
			    success: (chooseImageRes) => {
			      if (imgList.value.length + chooseImageRes.tempFilePaths.length > 9) {
			        uni.showToast({
			          title: '最多上传9张图片',
			          icon: 'none'
			        });
			      } else {
			        imgList.value.push(...chooseImageRes.tempFilePaths)
			      }
			    }
			  });
		  }
	  })
      
    }
  }
  const chooseVideo = () => {
    if (imgList.value.length > 0) {
      uni.showToast({
        title: '不能同时发布照片和视频',
        icon: 'none'
      })
    } else {
      videoPopup.value.close()
      uni.chooseVideo({
        sourceType: ["album"],
        success: (res) => {
          videoSrc.value = res.tempFilePath
        },
      })
    }
  }
  // 删除图片
  const close = (index : number) => {
    imgList.value.splice(index, 1)
  }
  // 删除视频
  const closes = () => {
    videoSrc.value = ''
    isOne.value = true
  }
  // 预览图片
  const previewImage = (index : number) => {
    uni.previewImage({
      urls: imgList.value,
      current: index
    });
  }

  // 视频第一帧
  const videoContext = ref<any>(null);
  const isOne = ref(true)
  const toPlay = () => {
    videoContext.value = uni.createVideoContext('myVideo');
    setTimeout(() => {
      if (videoContext.value && isOne.value) {
        videoContext.value.pause();
        isOne.value = false
      }
    }, 300)
  }
</script>

<style lang="scss"
  scoped>
  .twoContent {
    width: 702rpx;
    background: #FFFFFF;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    padding: 24rpx;
    margin: 0 auto;
  }

  .contentTitle {
    font-size: 32rpx;
    color: #262626;
    font-weight: 700;
    margin-bottom: 2vw;
  }

  .contentOne {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .change1 {
    width: 207rpx;
    height: 74rpx;
    background: #E4E2FC;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 28rpx;
    color: #6B64D3;
  }

  .change2 {
    width: 207rpx;
    height: 74rpx;
    background: #F4F6FA;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 28rpx;
    color: #262626;
  }

  .contentTwo {
    margin-top: 24rpx;
    width: 654rpx;
    height: 640rpx;
    background: #F4F6FA;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    position: relative;
  }

  .input {
    padding: 24rpx;
  }

  .button {
    margin: 24rpx;
    width: 686rpx;
    height: 80rpx;
    background: #6B64D3;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 32rpx;
    color: #FFFFFF;
  }

  .imageList {
    position: absolute;
    bottom: 24rpx;
    left: 24rpx;
    width: 100%;
    margin-top: 30rpx;
    display: flex;
    flex-wrap: wrap;

    .videoWrap {
      width: 80%;
      height: 400rpx;
      margin-left: 10%;
      background: #000;
      border-radius: 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;

      .videos {
        width: 90%;
        height: 90%;
      }

      .closes {
        width: 30rpx;
        height: 30rpx;
        position: absolute;
        z-index: 2;
        top: -20rpx;
        right: -20rpx;
      }
    }

    .imgWrap {
      width: 200rpx;
      height: 200rpx;
      margin-left: 4%;
      border-radius: 16rpx;
      margin-top: 20rpx;
      position: relative;

      .img {
        width: 200rpx;
        height: 200rpx;
        border-radius: 16rpx;
      }

      .close {
        width: 30rpx;
        height: 30rpx;
        position: absolute;
        z-index: 2;
        top: -15rpx;
        right: -15rpx;
      }
    }

    .addImg {
      background: #F5F5F5;
      border: 2rpx dashed #BFBFBF;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
  }

  .videoPopups {
    width: 100%;
    height: 320rpx;
    background: #fff;
    color: #262626;
    font-size: 32rpx;

    .choosePopup {
      width: 100%;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>